import { Divider, ProgressCircle } from "antd-mobile"
import { FC } from 'react'
import { useCountDown, useInterval } from 'ahooks'
import { useState } from 'react'
export const Dao: FC<{
    style?: object,   //容器盒子的样式
    total?: number,   //目标
    onEnd: any,       //回调
    flag?: boolean    //选择方式
}> = ({
    style,
    total = 5,
    onEnd,
    flag,
}) => {
        const [data, setData] = useState<number>(0)
        const sum = 100;
        const [countDown] = useCountDown({
            leftTime: total * 1000,
            interval: total * 100 / sum,
            onEnd,
        })
        const clear = useInterval(() => {
            if (data < sum) {
                setData(data + 1)
            } else {
                onEnd()
                clear()
            }
        }, total * 1000 / sum)
        return (
            <div style={{
                position: 'absolute',
                right: '10px',
                top: "10px",
                color: 'white',
                zIndex:100,
                ...style
            }}>{
                flag ?
                    <ProgressCircle
                        percent={Math.ceil(countDown / 1000 * (sum / total))}
                        style={{
                            '--fill-color': 'var(--adm-color-warning)',
                        }}
                    >
                        {Math.ceil(countDown / 1000 * (sum / total))}%
                    </ProgressCircle>
                    :
                    <ProgressCircle
                        percent={data}
                        style={{
                            '--fill-color': 'var(--adm-color-warning)',
                        }}
                    >
                        {data}%
                    </ProgressCircle>
            }
            </div>


        )
    }